<template>
  <div class="chart-map-container">
    <div id="mapEchart" ref="map" class="chart-map"></div>
  </div>
</template>
<script>
import maps from './world.json'
// import axios from 'axios'
export default {
  props: {
    analysisData: {
      required: true,
      type: Array
    },
    theme: String
  },
  data() {
    return {
      map: {},
      maps: maps,
      type: 0,
      data: [],
      legend: [],
      tooltip: ''
    }
  },
  watch: {
  },
  created() {
    // console.log(this.maps)
  },
  mounted() {
    this.initMap()
  },
  updated () {
  },
  methods: {
    initMap() {
      const linesData = this.getLinesData()
      const markerData = this.getMarkerData()
      this.echarts.registerMap('world', this.maps)
      this.option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item'
        },
        geo: {
          map: 'world',
          left: 10,
          top: 20,
          right: 10,
          // bottom: 0,
          boundingCoords: [
            // 定位左上角经纬度
            [-180, 90],
            // 定位右下角经纬度
            [180, -90]
          ],
          label: {
            emphasis: {
              show: false
            }
          },
          silent: true,
          itemStyle: {
            // color: {
            //   type: 'radial',
            //   x: 0.5,
            //   y: 0.5,
            //   r: 0.8,
            //   colorStops: [{
            //     offset: 0, color: rgba('246,128,57, 0.5') // 0% 处的颜色
            //   }, {
            //     offset: 1, color: rgba('210,99,27 0.5')'#D2631B' // 100% 处的颜色
            //   }]
            // },
            normal: {
              color: 'rgba(246,128,57, 0.8)',
              borderColor: '#F68039'
            }
          }
        },
        series: [
          {
            name: '',
            type: 'lines',
            zlevel: 2,
            polyline: true,
            tooltip: {
              show: false
            },
            markPoint: {
              symbol: 'circle',
              symbolSize: 50
            },
            lineStyle: {
              color: '#8DFFE5',
              width: 1,
              opacity: 0.2
            },
            data: linesData,
            progressiveThreshold: 500,
            progressive: 200
          },
          {
            name: '',
            type: 'lines',
            zlevel: 2,
            polyline: true,
            effect: {
              show: true,
              symbol: 'circle',
              symbolSize: [3, 10],
              trailLength: 0.2,
              constantSpeed: 60,
              color: '#fff'
            },
            tooltip: {
              show: false
            },
            markPoint: {
              symbol: 'circle'
            },
            lineStyle: {
              width: 0
            },
            data: linesData
          },
          {
            // name: '节点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: markerData,
            symbolSize: 10,
            showEffectOn: 'render',
            rippleEffect: {
              color: '#BEFAFF',
              brushType: 'fill'
            },
            hoverAnimation: true,
            tooltip: {
              formatter: function(val) {
                console.log(val)
                return `${val.name}</br>ip:&nbsp&nbsp&nbsp&nbsp ${val.data.ip}</br>详情: ${val.data.des}`
              }
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              color: '#049DCE',
              shadowBlur: 10,
              shadowColor: '#009692'
            },
            zlevel: 3
          }
        ]
      }
      this.setPieChart()
    },
    getLinesData() {
      const res = []
      if (this.analysisData && this.analysisData.length) {
        let toCoord = []
        let fromCoord = []
        let fromName = ''
        let toName = ''
        const nodeMapping = {}
        this.analysisData.forEach((item, index) => {
          nodeMapping[item.id] = item
        })
        this.analysisData.forEach(item => {
          fromCoord = item.lnglat
          fromName = item.name
          if (item.to && item.to.length) {
            item.to.forEach(toItem => {
              toCoord = nodeMapping[toItem].lnglat
              toName = nodeMapping[toItem].name
              res.push({
                fromName: fromName,
                toName: toName,
                coords: [fromCoord, toCoord]
              })
            })
          }
        })
      }
      return res
    },
    getMarkerData() {
      const res = []
      if (this.analysisData && this.analysisData.length) {
        this.analysisData.forEach((item, index) => {
          res.push({
            name: item.name,
            value: item.lnglat,
            des: item.des,
            ip: item.ip
          })
        })
      }
      return res
    },
    setPieChart() {
      // const dom = this.$refs.map
      const mapChart = this.echarts.init(document.getElementById('mapEchart'))
      // mapChart.clear()
      mapChart.setOption(this.option)
      window.addEventListener('resize', function () {
        mapChart.resize()
      })
    }
  }
}
</script>
<style scoped>
  body {
    min-width: 270px;
  }
  .chart-map-container {
    width: 100%;
    height: 0;
    padding-bottom: 57.2%;
    position: relative;
  }
  .chart-map {
    width: 100%;
    height: 100%;
    position: absolute;
  }
</style>
